<template>
    <section>
        <div class="top">
            <div class="logo" @click="back">
                <i class="el-icon-back"></i>
                <span>穷游网</span>
            </div>
        </div>
        <div class="center" v-if="ischange">
            <div class="word">注册/登陆</div>
            <div class="phone">
                <div class="left">
                    <div class="country_code">+86</div>
                    <div class="icon"><i class="el-icon-arrow-down"></i></div>
                </div>
                <div class="right">
                    <div class="input_text">
                        <input type="number" maxlength="11" placeholder="手机号" @input="ing" v-model="val" value="val">
                        <span v-if="isplay" @click="deleteall"><img src="../../assets/login/取消.png"></span>
                    </div>
                </div>
            </div>
            <div class="tip">未注册的手机号验证后自动注册</div>
            <div class="btn" @click="next" :class="{'bgc':isbgc}">下一步</div>
            <div class="other">
                <span @click="change">账号密码登陆</span>
                <span @click="help" >需要帮助？</span>
            </div>
        </div>

        <div class="user" v-if="!ischange">
            <div class="word">账号密码登陆</div>
            <div class="account">
                <div class="username">
                    <i class="el-icon-user-solid"></i>
                    <input type="text" placeholder="手机号/邮箱" @input="ings(1)" v-model='users' value='users'>
                    <span v-if="isplay1" @click="deletealls(1)"><img src="../../assets/login/取消.png"></span>
                </div>
                <div class="pwd">
                    <i class="el-icon-key"></i>
                    <input type="password" placeholder="密码" @input="ings(2)" v-model="pwds" value="pwds">
                    <span v-if="isplay2" @click="deletealls(2)"><img src="../../assets/login/取消.png"></span>
                    <span @click="forget">忘记密码</span>
                </div>
            </div>
            <div class="btn" @click="login" :class="{'bgc1':isbgc1}">登陆</div>
            <div class="other">
                <span><span @click="change_phone">手机验证码登陆</span> | <span>境外手机号</span></span>
                <span @click="help" >需要帮助？</span>
            </div>
        </div>

        <div class="help" v-if="ishelp" @click="cancel">
            <div class="list">
               <div class="one">常见问题</div>
                <div class="two">留言反馈</div>
                <div class="three" @click="cancel">取消</div>
            </div>
        </div>
    </section>
</template>

<script type="text/javascript">
    import forget from "@/components/login/forget"
    export default {
        name:'login',
        components:{
            'forget':forget,
        },
        data(){
            return{
                isplay:false,
                isplay1:false,
                isplay2:false,
                isbgc:false,
                isbgc1:false,
                ishelp:false,
                ischange:true,
                val:'',
                users:'',
                pwds:'',
                info:"请输入手机号"
            }
        },
        methods:{
            forget(){
                this.$router.push({
                    path:'/forget'
                })
            },
            back(){
                this.$router.push({
                    path:'/'
                })
            },
            ing(){
                this.isplay = true;
                if(this.val==''){
                    this.isbgc = false;
                }
                else{
                    this.isbgc = true;
                }
            },
            ings(n){
                if(n==1){
                    this.isplay1 = true;
                }
                else{
                    this.isplay2 = true;
                }

                if(this.users=="" || this.pwds==""){
                    this.isbgc1 = false;
                }
                else{
                    this.isbgc1 = true;
                }
            },
            deleteall(){
                this.val = '';
                if(this.users==""){
                   this.isplay = false;
                   this.isbgc = false;
                }
            },
            deletealls(n){
                if(n==1){
                    this.users="";
                    this.isplay1=false;
                }
                else{
                    this.pwds="";
                    this.isplay2=false;
                }
                if(this.users=="" || this.pwds==""){
                    this.isbgc1 = false;
                }
                else{
                    this.isbgc1 = true;
                }
            },
            next(){
                if(this.isbgc == false){
                    alert("请输入正确的手机号码")
                }
                else{
                    alert('注册成功')
                }
            },
            help(){
                this.ishelp = !this.ishelp;
            },
            cancel(){
                this.ishelp = false;
            },
            change(){
                this.ischange = false;
            },
            change_phone(){
                this.ischange = true;
            },
            login(){
                if(this.users==''){
                    alert('请输入正确的用户名')
                }
                else if(this.pwds==''){
                    alert('请输入密码')
                }
            }



        }
    }
</script>


<style type="text/css" lang="less">
section{
    height: 100vh;
    .top{
        width: 100%;
        .logo{
            margin-left: 1em;
            width: 50%;
            display: flex;
            justify-content: space-between;
            font-size: 20px;
            height: 2em;
            line-height: 2em;
            i{
                height: 2em;
                line-height: 2em;
            }
        }
    }
    .center{
        margin:2em 0 2em 2em;
        .word{
            font-size: 30px;
            font-weight: 900;
        }
        .phone{
            display: flex;
            margin: 2em 2em 1em 0;
            // font-size: 20px;
            border-bottom: 1px solid #eee;
            .left{
                display: flex;
                height: 20px;
                .country_code{
                    font-weight: 800;
                }
            }
            .right{
                height: 20px;
                .input_text{
                    height: 20px;
                    input{
                        outline: none;
                        border:none;
                    }
                    span{
                        display: inline-block;
                        height: 20px;
                    }
                }
            }
        }
        .tip{
            color: rgba(0,0,0,.3);
            font-size: 14px;
        }
        .btn{
            margin:2em 0;
            // padding: 1em 0;
            width: 90%;
            height: 4em;
            line-height: 4em;
            text-align: center;
            background: rgba(21,219,145,.3);
            color: #fff;
            border-radius: 50px;
            letter-spacing: 2px;
            font-size: .32rem;
            font-weight: 500;
        }
        .other{
            margin-right: 2em;
            display: flex;
            justify-content: space-between;
            color:rgba(0,0,0,.6);
        }
        .bgc{
            background-color: #15db91;
        }
    }
    .help{
        width: 100%;
        height:100%;
        background:rgba(0,0,0,0.5);
        position: absolute;
        left:0;
        right: 0;
        top:0;
        bottom: 0;
        .list{
            position: absolute;
            left:0;
            right:0;
            bottom: 0;
            background-color: #fff;
            div{
                text-align:center;
                width: 100%;
                padding: 1em 0;
                border-bottom: 1px solid #e0e0e0;
            }
            .one,.two{
                color:#11bf79!important;
            }
        }

    }
    .user{

        margin:2em 0 2em 2em;
        .word{
            font-size: 30px;
            font-weight: 900;
        }
        .account{
            margin:2em 0;
            input{
                border:none;
                outline: none;
            }
            div{
                width: 90%;
                padding-bottom: 0.5em;
                border-bottom:1px solid rgba(0,0,0,.2);
            }
            i{
                height:20px;
                line-height: 20px;
            }
            .username{
                margin:2em 0;
                height:20px;
            }
            .pwd{
                height:20px;
                span:last-child{
                    float: right;
                    color: rgba(0,0,0,.6);
                }

            }
        }
        .btn{
            margin:2em 0;
            // padding: 1em 0;
            width: 90%;
            height: 4em;
            line-height: 4em;
            text-align: center;
            background: rgba(21,219,145,.3);
            color: #fff;
            border-radius: 50px;
            letter-spacing: 2px;
            font-size: .32rem;
            font-weight: 500;
        }
        .other{
            margin-right: 2em;
            display: flex;
            justify-content: space-between;
            color:rgba(0,0,0,.6);
        }
        .bgc1{
            background-color: #15db91;
        }


    }


}


</style>
